#perseus {
    position: relative;
}
.framework-perseus.perseus-mobile {
    margin-top: 48px;
}
.no-select {
    -webkit-user-select: none;
    user-select: none;
}
.blank-background {
    background-color: #fdfdfd;
}
.graphie {
    -webkit-user-select: none;
    user-select: none;
}
.graphie svg {
    position: absolute;
    top: 0;
    left: 0;
}
var,
div.graphie {
    white-space: pre;
    /**
   * Graphie didn't have a fixed font-size and was just using
   * the surrounding font-size. However some labels are banking on
   * specific dimensions, so we need to lock it to a specific size.
   */
    font-size: 14px;
}
.hint.last-hint .paragraph {
    font-weight: bold;
}
#answercontent input[type="text"].perseus-input-size-normal,
#answercontent input[type="number"].perseus-input-size-normal,
.framework-perseus input[type="text"].perseus-input-size-normal,
.framework-perseus input[type="number"].perseus-input-size-normal {
    border: 1px solid #ccc;
    width: 80px;
}
#answercontent input[type="text"].perseus-input-size-small,
#answercontent input[type="number"].perseus-input-size-small,
.framework-perseus input[type="text"].perseus-input-size-small,
.framework-perseus input[type="number"].perseus-input-size-small {
    border: 1px solid #ccc;
    width: 40px;
}
#answercontent input[type="text"].perseus-input-right-align,
#answercontent input[type="number"].perseus-input-right-align,
.framework-perseus input[type="text"].perseus-input-right-align,
.framework-perseus input[type="number"].perseus-input-right-align {
    text-align: right;
}
.framework-perseus.perseus-mobile .perseus-input-right-align .keypad-input {
    text-align: right;
}
.framework-perseus div.paragraph {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    margin: 22px 0px;
}
.framework-perseus .test-prep-blurb div.paragraph {
    font-size: 16px;
    line-height: 20px;
}
.framework-perseus div.instructions {
    display: block;
    font-family: "Noto Serif", serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 22px;
    font-style: italic;
}
.framework-perseus
    .perseus-renderer
    > .paragraph
    > ul:not([data-widget="radio"]),
.framework-perseus .perseus-renderer > .paragraph > ol {
    margin: 0px 0px 22px 0px;
}
.framework-perseus
    .paragraph
    ul:not([data-widget="radio"], .indicatorContainer) {
    padding-left: 35px;
    list-style-type: disc;
}
.framework-perseus .paragraph ol {
    list-style: decimal;
    padding-left: 2em;
}
.framework-perseus blockquote {
    padding: 0 2.5em;
}
.framework-perseus .zoomable {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}
.framework-perseus sup:not(.mq-non-leaf) {
    font-size: smaller;
    vertical-align: super;
    line-height: 0;
}
.framework-perseus .range-input {
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
    padding: 0px 5px;
}
.framework-perseus .range-input > input {
    border: 0;
    display: inline;
    text-align: center;
    width: 30px;
}
.framework-perseus .range-input > span {
    color: #999;
    font-size: 14px;
}
.framework-perseus .number-input {
    border: 1px solid #909296;
    border-radius: 5px;
    margin: 0;
    padding: 5px 0;
    text-align: center;
    width: 40px;
}
.framework-perseus .number-input.invalid-input {
    background-color: #ffbaba;
    outline-color: red;
}
.framework-perseus .number-input.mini {
    width: 40px;
}
.framework-perseus .number-input.small {
    width: 60px;
}
.framework-perseus .number-input.normal {
    width: 80px;
}
.framework-perseus .graph-settings .graph-settings-axis-label {
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
    padding: 5px 5px;
    width: 70px;
    float: right;
    margin: 0 5px;
}
.framework-perseus .graph-settings .graph-settings-background-url {
    width: 250px;
}
.framework-perseus .graphie-container {
    position: relative;
}
.framework-perseus .graph-settings,
.framework-perseus .image-settings,
.framework-perseus .misc-settings {
    padding-bottom: 5px;
}
.framework-perseus .misc-settings,
.framework-perseus .type-settings {
    border-top: 1px solid black;
    padding-top: 5px;
}
.framework-perseus .svg-image {
    display: block;
    margin: 0 auto;
    margin-inline-start: auto;
    margin-inline-end: auto;
}
.framework-perseus .unresponsive-svg-image,
.framework-perseus .perseus-rendered-radio .unresponsive-svg-image {
    display: inline-block;
    position: relative;
}
.framework-perseus .unresponsive-svg-image > .graphie-container,
.framework-perseus
    .perseus-rendered-radio
    .unresponsive-svg-image
    > .graphie-container {
    position: absolute;
    top: 0;
    left: 0;
}
.framework-perseus .fixed-to-responsive {
    position: relative;
    width: 100%;
    /* Use CSS aspect-ratio property to maintain aspect ratio
     * without needing a spacer div. The aspect-ratio is set inline via style prop. */
}
.framework-perseus .fixed-to-responsive > :not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Legacy table styles. Remove when XOM is rolled out (see below for
   updated XOM styles). */
.framework-perseus:not(.perseus-mobile) table {
    font-size: 14px;
    line-height: 19.6px;
}
.framework-perseus:not(.perseus-mobile) table th,
.framework-perseus:not(.perseus-mobile) table td {
    padding: 5px 10px;
    text-align: left;
}
.framework-perseus:not(.perseus-mobile) table th[align="center"],
.framework-perseus:not(.perseus-mobile) table td[align="center"] {
    text-align: center;
}
.framework-perseus:not(.perseus-mobile) table th[align="right"],
.framework-perseus:not(.perseus-mobile) table td[align="right"] {
    text-align: right;
}
.framework-perseus:not(.perseus-mobile) table th {
    border-bottom: 2px solid #ccc;
    font-weight: bold;
    padding-bottom: 2px;
}
.framework-perseus:not(.perseus-mobile) table tr:nth-child(odd) td {
    background-color: #f7f8fa;
}
.framework-perseus:not(.perseus-mobile) .perseus-titled-table {
    display: inline-block;
}
.framework-perseus:not(.perseus-mobile) .perseus-titled-table table {
    margin-left: auto;
    margin-right: auto;
}
.framework-perseus:not(.perseus-mobile) .perseus-table-title {
    text-align: center;
    font-size: larger;
}
.framework-perseus:not(.perseus-mobile)
    table.non-markdown
    tr:nth-child(odd)
    td {
    background-color: transparent;
}
.framework-perseus:not(.perseus-mobile) table.non-markdown th,
.framework-perseus:not(.perseus-mobile) table.non-markdown td {
    border-width: 0;
}
/* New XOM styles for tables. */
.framework-perseus.perseus-mobile {
    /* There are three kinds of tables:
       1) normal "tables" - emitted by markdown (src/perseus-markdown.jsx)
       2) "titled tables" - emitted by markdown as well (these are just
          tables with a title, and encased in one more element)
       3) "table widget" - where a user is expected to enter answers in a
          table form (src/widgets/table.jsx).
      Moreover, there the Categorizer widget uses <table> tags, so these
      stylings will apply there as well.  */
}
.framework-perseus.perseus-mobile table {
    border-collapse: collapse;
    margin: 0 auto;
}
.framework-perseus.perseus-mobile table tbody > tr {
    border: 1px solid #e5e5e5;
}
.framework-perseus.perseus-mobile table th,
.framework-perseus.perseus-mobile table td {
    padding: 16px;
    text-align: left;
}
.framework-perseus.perseus-mobile table th[align="center"],
.framework-perseus.perseus-mobile table td[align="center"] {
    text-align: center;
}
.framework-perseus.perseus-mobile table th[align="right"],
.framework-perseus.perseus-mobile table td[align="right"] {
    text-align: right;
}
.framework-perseus.perseus-mobile table td {
    background: #fff;
}
.framework-perseus.perseus-mobile table th {
    font-weight: bold;
}
@media (max-width: 767px) {
    .framework-perseus.perseus-mobile table {
        width: 100%;
        min-width: 480px;
    }
    .framework-perseus.perseus-mobile table tbody > tr {
        border-left: 0;
        border-right: 0;
    }
}
.framework-perseus.perseus-mobile .perseus-titled-table {
    display: inline-block;
}
.framework-perseus.perseus-mobile .perseus-table-title {
    text-align: center;
    font-size: larger;
}
/* Widget CSS */
.perseus-graph-padding {
    box-sizing: content-box;
    padding: 25px 25px 0 0;
}
.perseus-article .perseus-dropdown .perseus-renderer .paragraph,
.perseus-article .perseus-dropdown .perseus-renderer .perseus-block-math {
    /* overriding overly broad selectors in .framework-perseus rules */
    margin-bottom: 0 !important;
    font-size: 18px !important;
}
